// $(function() {})只需要等待网页中的DOM结构加载完毕，就能执行JS代码
// window.onload = function() {} 必须等待网页全部加载完毕（包括图片等），然后再执行JS代码
window.onload = function() {
    var $oBoxs = $('.box'), // 这些变量必须设置为全局的
        $oMain = $('#main'), // 装载所有图片的div
        oBoxWidth = $oBoxs.outerWidth(), // 每个图片box宽度
        columnNum = Math.floor(document.body.clientWidth / oBoxWidth), // 图片列数
        columnHeightList = [];

    // console.log('oBoxWidth', oBoxWidth)
    waterfall($oBoxs, oBoxWidth, columnNum, 0, columnHeightList);

    window.onresize = function() {
        clearTimeout(handleResize.tID);
        handleResize.tID = setTimeout(function() {
            handleResize();
        }, 300);
    }

    function handleResize() {
        columnNum = Math.floor(document.body.clientWidth / oBoxWidth);
        columnHeightList = [];
        waterfall($oBoxs, oBoxWidth, columnNum, 0, columnHeightList);
    }

    window.onscroll = function() {
        clearTimeout(handleScroll.tID);
        handleScroll.tID = setTimeout(function() {
            handleScroll();
        }, 200)
    }

    function handleScroll() {
        var $lastBox = $oBoxs.last();
        var lastBoxTop = $lastBox.offset().top; // 距离页面顶部的高度
        var lastBoxHeight = $lastBox.outerHeight(); // 自身高度
        var scrollTop = $(document).scrollTop(); //注意解决兼容性
        var bodyHeight = document.documentElement.clientHeight; //可视区高度

        // console.log('(scrollTop + bodyHeight)', (scrollTop + bodyHeight))
        // console.log('lastBoxTop + lastBoxHeight / 2', (lastBoxTop + lastBoxHeight / 2))

        // 加载图片的条件
        if ((scrollTop + bodyHeight) > lastBoxTop) {
            console.log('加载图片')
            var oldLen = $oBoxs.length; // 旧长度
            loadImg($oMain, function() {
                $oBoxs = $('.box'); // 加入新的box后需更新box
                // 很蓝瘦，不知道为什么columnHeightList不能利用之前算好的值，一旦使用后，offsetHeight获取不正确。目前的办法是每次从第一个元素开始排列
                waterfall($oBoxs, oBoxWidth, columnNum, oldLen, columnHeightList);
            });
        }
    }
}




/**
 * 瀑布流函数
 * @param  {[type]} $oBoxs     图片box数组
 * @param  {[type]} oBoxWidth 图片box宽度
 * @param  {[type]} columnNum 图片列数
 * @param  {[type]} i         第i张图片起调整成瀑布流布局
 * @param  {[type]} columnHeightList 存放列高度的数组
 */
function waterfall($oBoxs, oBoxWidth, columnNum, i, columnHeightList) {
    var targetIndex = 0,
        targetTop = 0;
    for (; i < $oBoxs.length; i++) {
        var $box = $($oBoxs[i]);
        var boxHeight = Math.floor($box[0].offsetHeight);
        if (i < columnNum) {
            columnHeightList.push(boxHeight)
            $box.css({ 'position': 'absolute' });
            $box.animate({
                    'left': Math.floor(i * oBoxWidth) + 'px',
                    'top': '0px'
                },
                500,
                function() {
                    /* stuff to do after animation is complete */
                    console.log('动画动作完成1！');
                });
        } else {
            targetIndex = columnHeightList.indexOf(Math.min.apply(null, columnHeightList));
            targetTop = columnHeightList[targetIndex];
            // 注意加单位啊！！！
            $box.css('position', 'absolute')

            $box.animate({
                    'left': Math.floor(targetIndex * oBoxWidth) + 'px',
                    'top': Math.floor(targetTop) + 'px'
                },
                500,
                function() {
                    /* stuff to do after animation is complete */
                    console.log('动画动作完成2！');
                });

            // 将所在的列高度加上图片高度
            columnHeightList[targetIndex] += boxHeight;
        }
    }
}


// 将图片包装成box后，加载到mainDiv中
function loadImg($mainDiv, cb) {
    var imgData = { data: [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' },{ 'src': '4.jpg' }, { 'src': '5.jpg' }, { 'src': '6.jpg' }] };
    var prefix = '../../source/image/';
    var imgLen = imgData.data.length;
    imgData.data.forEach(function(val, index) {
        var $oPic = $('<div>').addClass('pic');
        var $oBox = $('<div>').addClass('box');
        var $img = $('<img>').attr('src', prefix + val.src);

        $oPic.append($img);
        $oBox.append($oPic);
        $mainDiv.append($oBox);

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
        var bodyHeight = document.documentElement.clientHeight; //可视区高度

        // 解决图片加载过长时下降速度过快
        $oBox.css({
            'left':0,
            'top':(scrollTop - bodyHeight) + 'px'
        });

        // 避免新加进来的图片叠加，虽然再滚下去又自动布局好了
        $img.on('load', function() {
            if (!--imgLen) {
                console.log('执行图片回调')
                cb();
            }
        })
    });
}